<template>
    <div class="login">
        <p class="logo">
            <img src="@/assets/images/logo_white.png" alt="logo">
        </p>
        <form @submit.prevent="login">
            <div class="login-form tc">
                <h2 class="title">欢迎来到资产管理平台 !</h2>
                <div class="input user-name">
                    <i class="icon"></i>
                    <input type="text" autocomplete="off" placeholder="请输入账号" v-model="account">
                </div>
                <div class="input user-pwd">
                    <i class="icon"></i>
                    <input type="password" autocomplete="off" placeholder="请输入密码" v-model="password">
                </div>
                <p class="btn">
                    <button type="submit" :loading="true">登陆</button>
                </p>
            </div>
        </form>
    </div>
</template>

<script>
    export default {
        name: "login",
        data() {
            return {
                account: "admin",
                password: "123456"
            }
        },
        methods: {
            login() {
                if (this.account.trim() === '' || this.password.trim() === '') {
                    this.$message.error(this.$msgDictionary.loginEmpty)
                    return
                }
                let params = {
                    account: this.account,
                    password: this.password
                }
                // this.$router.push({path: '/layout/index'})
                this.$ajax.autoService
                    .login(params)
                    .then((res) => {
                        let result = res.data
                        if (result.code === 200) {
                            this.$router.push({path: '/layout/index'})
                            // window.location.reload()
                            document.cookie = "token=" + "eyJhbGciOiJIUzI1NiJ9.eyJleHQiOjE1MjQxMjA0NzA3NjMsInVzZXJfYWNjb3VudCI6IjAxMjM0NTY3ODlAcXEuY29tIiwiaWF0IjoxNTIzODYxMjcwNzYzfQ.SoWCZUYebwjGKCllQOXiAy_8NZmAKs3Jnzli2ho4_3Y"
                            if (result.result) {
                                this.$store.commit('setUser', result.result)
                                localStorage.setItem("user", JSON.stringify(result.result))
                            }
                        } else {
                            this.$message.error(result.msg)
                        }
                    }, () => {
                        this.$message.error(this.$msgDictionary.serviceException)
                    })
            }
        }
    }
</script>

<style lang="scss" type="text/scss" scoped>
    @import "../assets/css/global";

    ::-webkit-input-placeholder {
        color: $segment;
        font-weight: normal;
    }

    ::-moz-placeholder {
        color: $segment;
        font-weight: normal;
    }

    :-ms-input-placeholder {
        color: $segment;
        font-weight: normal;
    }

    .login {
        height: 100%;
        width: 100%;
        background: url("../assets/images/log_bg.png") no-repeat;
        background-size: 100% 100%;
        .logo {
            padding: 0.4rem 0.6rem;
        }
        .login-form {
            width: 6rem;
            height: 4rem;
            padding: 0.1rem;
            margin: auto;
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            .title {
                font-size: 0.24rem;
                color: $white;
            }
            .input {
                border: 1px solid $segment;
                height: 0.6rem;
                line-height: 0.6rem;
                margin: 0.3rem auto;
                width: 4rem;
                text-align: left;
                padding: 0 0.2rem;
                box-sizing: border-box;
                white-space: nowrap;
                .icon {
                    padding: 20px;
                    background: url("../assets/images/spirit.png") no-repeat 0 8px;
                }
                input {
                    border: 0;
                    outline: none;
                    background: transparent;
                    color: $white;
                    width: 2.6rem;
                    vertical-align: top;
                    height: 0.6rem;
                    padding-left: 0.2rem;
                }
                &.user-pwd {
                    .icon {
                        background-position: -82px 11px;;
                    }
                }
            }
            .btn {
                padding-top: 0.4rem;
                button {
                    height: 0.6rem;
                    width: 4rem;
                    cursor: pointer;
                    color: $strong_red;
                    border: 0;
                    background: #FDF4F3;
                    font-size: 0.18rem;
                }
            }
        }
    }
</style>
